<template>
    <div class="my-input">
        <el-button size="small"  text @click="minus" v-if="isShowControls">
            <SvgIcon name="minus" color="#303133" size="20" />
        </el-button>
        <div class="val" @click="inputCount">{{ count }}</div>
        <el-button size="small" text @click="plus" v-if="isShowControls">
            <SvgIcon name="plus" color="#303133" size="20" />
        </el-button>
    </div>
</template>

<script setup lang="ts">


 withDefaults(defineProps<{ count: string | number,isShowControls?:boolean}>(), {
    isShowControls:true
})
const emit = defineEmits(['minus','plus','inputCount'])

function minus(){
    emit('minus')
}
function plus(e){
    console.log(e)
    console.log('plust')
    emit('plus')
}
function inputCount(){
    emit('inputCount')
}
</script>
<style lang="scss" scoped>
.my-input{
    display: flex;
    align-items: center;
    justify-content:center;
    .val{
        
        width: 64px;
        text-align: center;
    }
}
</style>